<template>
	<div class="news">
		<button @click="handleNews">点我获取一条新闻</button>
		<h3>现在一共有{{personCount}}人</h3>
		<ul>
			<li v-for="news in newsList" :key="news.id">
				{{news.title}}
			</li>
		</ul>
	</div>
</template>

<script>
	import { mapGetters, mapState } from 'vuex'
	export default {
		name:'News',
		computed:{
			...mapState(['newsList','persons']),
			...mapGetters(['personCount'])
		},
		methods: {
			handleNews(){
				this.$store.dispatch('getNews')
			}
		},
	}
</script>

<style scoped>
	.news{
		background-color: skyblue;
		padding: 20px;
	}
</style>